<template >
  <div>
    <ul class="tag-box" >
      <li class="tag-li" v-for="(item,index) in tagList" :key="index" :class="{active:isActive(item.path)}">
        <router-link :to="item.path" class="tag-li-route" >{{ item.title }}</router-link>
        <el-icon size="12" @click="close(index)" ><Close  /></el-icon>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup >
import {useTags} from "@/store/tags"
import { ref,computed } from 'vue';
import { RouteRecordRaw, onBeforeRouteUpdate, useRoute,useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()
const tagStore=useTags()
const tagList=tagStore.tags
const isActive=(path:string)=>{
  return path===route.fullPath
}
// 判断tags有没有当前路由
const setTags=(route:any)=>{
  const isExist=tagList.some(item=>{
    return item.path===route.path
  })
  if(!isExist){
    tagStore.setTags({
      path:route.path,
      title:route.meta.title
    })
  }
}
setTags(route)
onBeforeRouteUpdate(to=>{
  setTags(to)
})
// 关闭
const close=(index:any)=>{
  
  const tagItem=tagList[index]
  const tagLen=tagList.length
  // 删除自己
  const tagSelf=route.fullPath===tagItem.path
  if(tagSelf&&tagLen!==1){
    tagStore.delTags(index)
    router.push(tagList[index-1].path)
  }
  if(tagLen===1){
    if(tagItem.path==="/home"){
      return
    }else{
      tagStore.delTags(index)
    router.push("/")
    }

  }
  tagStore.delTags(index)
}


</script>
<style scoped lang="scss">
  .tag-box{
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;

    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  }
  .tag-li{
    height: 15px;
    transition: all .4s;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px;
  }
  .tag-li:hover{
    background-color: rgba(225, 162, 108,.5);
  }
  .tag-li-route{
    text-decoration: none;
    color: rgb(34, 53, 60);
    margin-right: 7px;
  }
  .active{
    background-color: rgba(225, 162, 108,.5);
  }
</style>